<template>
	<div class="item" @click="listItemClick">
		<!--歌单图片 -->
		<div class="item-img" @mouseenter="showIcon" @mouseleave="closeIcon">
			<!-- 图片上的播放图标 鼠标经过时显示 加了淡入淡出的动画 -->
			<transition name="el-fade-in-linear">
				<div class="album-playicon" v-show="isShowPlay">
					<span class="iconfont icon-play1"></span>
				</div>
			</transition>
			<!-- 图片本身 使用懒加载 -->
			<div class="album-img" v-lazy-container="{ selector: 'img' }">
				<img :data-src="cover" :data-loading="require('@/assets/imgs/loading.png')" />
			</div>
			<!-- 唱片图 -->
			<img src="@/assets/imgs/cp2.png" alt="" class="record" v-if="albumlistitem.picUrl" />
			<div class="box" v-if="albumlistitem.picUrl"></div>
		</div>
		<!-- 歌单下的文字描述 -->
		<div class="item-text">
			<p class="albumName">
				<span>{{ albumlistitem.name }}</span> <span class="by" style="padding-left: 10px">{{ albumlistitem.artists[0].name }}</span>
			</p>
			<p v-if="albumlistitem.publishTime" class="by publishtime">
				{{ showDate(albumlistitem.publishTime) }}
			</p> 
			 <p v-if="albumlistitem.subTime" class="by">
				{{ showDate(albumlistitem.subTime) }}
			</p> 
		</div>
	</div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { formatDate } from "@/common/formatDate";
import { useRouter } from 'vue-router';

// 接收传入的 albumlistitem 属性
const props = defineProps({
  albumlistitem: {
    type: Object,
    default: () => ({})
  }
});
const router=useRouter();
// 响应式变量
const isShowPlay = ref(false);

// 计算属性：封面图链接
const cover = computed(() => {
  return `${props.albumlistitem.picUrl}?param=200y200`;
});

// 事件处理函数
const showIcon = () => {
  isShowPlay.value = true;
};

const closeIcon = () => {
  isShowPlay.value = false;
};

const listItemClick = () => {
  router.push(`/albumdetail/${props.albumlistitem.id}`);
  isShowPlay.value = false;
};

//格式化日期
const showDate = (value) => {
  const date = new Date(value);
  return formatDate(date, "yyyy-MM-dd");
};

window.onerror = function(message, source, lineno, colno, error) {
  // 可以在这里对错误进行处理，避免错误信息暴露在页面上
  console.log('捕获到全局错误:', message);
  return true;  // 返回true避免默认的浏览器处理
};
</script>

<style lang="less" scoped>
.item {
	width: 100%;
	cursor: pointer;
	.item-img {
		position: relative;
		width: 200px;
		height: 200px;
		border-radius: 18px;
		overflow: hidden; /* 防止内容溢出 */
		.album-img {
			width: 100%;
			height: 100%;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.album-playicon {
			position: absolute;
			display: flex;
			align-items: center;
			justify-content: center;
			top: 0;
			width: 100%;
			height: 100%;
			background: rgba(100, 100, 100, 0.3);
			.iconfont {
				font-size: 42px;
				color: #fff;
			}
		}
		.box {
			position: absolute;
			top: 7.5%;
			left: 36px;
			width: 85%;
			height: 85%;
			border: 1px solid #d5d5d8;
			background: rgba(100, 100, 100, 0.3);
			z-index: -1;
		}
		.record {
			position: absolute;
			top: 0px;
			left: 28px;
			width: 100%;
			height: 100%;
			z-index: -1;
		}
		img {
			width: 100%;
			height: 100%;
		}
	}
	.item-text {
		margin: 5px 0;
		font-size: 14px;
		.albumName,
		.publishtime {
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}
	}
}
</style>
